import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push //解决用js跳转时push('/')报错 
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}


//历史模式 外观上的区别就是不加#
const routes = [{
		path: '/',
		name: 'Home',
		// component: Home   这种不是路由懒加载
		components: {
			// router-view不设置name是匿名  带的话是具名路由
			default: Home, //显示在没有name的属性上	
			pp: () => import('../views/Home.vue') //显示在name为pp的router-view上  此处为懒加载处理
		}
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue') //这种是路由懒加载
	},
	{
		path: '/qqq/:arg', //$route.params.arg可以拿到
		name: 'abc',
		component: () => import('../views/动态路由.vue'),
		props: route => ({
			arg2: route.params.arg
		})
		/*
		props: {  //默认值 开启时  组件的prop:[]来接收  单个视图可以直接props:true
			default: true,
			pp: true,			
		}
		*/
	},
	{
		path: '/qqq',
		name: 'asd',
		component: () => import('../views/查询参数.vue'),
		props: route => ({ //动态值        返回对象时要用()包住
			name: route.query.name, //组件内prop:['name','age']可拿到
			age: route.query.age
		})
	},
	{
		path: '/user',
		name: 'hjh',
		component: () => import('../views/user.vue'),
		/*
		push 在history里 通过记录前进后退							
		replace 不能通过history来前进后退				
		js/to 跳转:this.$router.push({path:"/user",name:"hjh",query:{name:"20"},params:{id:30}})
		 */
	},
	{
		//重定向
		path: '/find',
		name: 'find',
		redirect: {
			path: "/",
			name: 'Home'
		}
	},
	/*
	子路由嵌套
	{
		path: '/father',
		name: 'father',
		component: () => import('../views/father.vue'),
		children: [{  前提是父容器要加router-view
			path: 'son',
			name: "son",
			alias: '', 16进制 加密 别名跳转 要加斜杠
			component: () => import('../views/newsqq.vue'),
			children: [] //可以继续嵌套下去
		}]
	}
	
	*/
]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
})

export default router
